<script type="text/x-template" id="replay-page">
    <div class="content-inner replay-page">
        <vue-horizontal style="height: 300px;">
            <div class="replay-period" v-for="year in years" @click="getReplayYear(year.attributes.year)">
                <div class="artwork-container">
                    <mediaitem-artwork :size="200"
                                       :url="year.relationships.playlist.data[0].attributes.artwork.url"></mediaitem-artwork>
                </div>
                {{ year.attributes.year }}
            </div>
        </vue-horizontal>
        <hr>
        <transition name="replaycard">
            <div class="replay-viewport" v-if="loaded.id != -1">
                <!-- Stats -->
                <div class="replay-video" v-if="false">
                    <mediaitem-artwork
                            :url="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.previewFrame.url"
                            :video="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.video"
                            :video-priority="true"></mediaitem-artwork>
                </div>
                <h1 class="replay-header">{{ loaded.attributes.year }} {{$root.getLz('term.replay')}}</h1>
                <hr>
                <div class="row">
                    <div class="col">
                        <h4 @click="hourshow = !hourshow">{{convertToHours(loaded.attributes.listenTimeInMinutes)}}
                            {{$root.getLz('term.time.hours')}} 
                            {{hourshow ? "" : (loaded.attributes.listenTimeInMinutes % 60) }}
                            {{hourshow ? "" : $root.getLz('term.time.minutes')}}</h4>
                        <h4>{{ loaded.attributes.uniqueAlbumCount }} {{$root.getLz('term.uniqueAlbums')}}</h4>
                        <h4>{{ loaded.attributes.uniqueArtistCount }} {{$root.getLz('term.uniqueArtists')}}</h4>
                        <h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
                    </div>
                    <div class="col-auto replay-playlist-container">
                        <mediaitem-square kind="card" :no-scale="true" :force-video="true"
                                          :item="loaded.playlist"></mediaitem-square>
                    </div>
                </div>
                <!--            Top Artists-->
                <h3>{{$root.getLz('term.topArtists')}}</h3>
                <div class="well">
                    <mediaitem-scroller-horizontal>
                        <div class="card replay-card" v-for="artistData in loaded.views['top-artists'].data">
                            <div class="card-body">
                                <mediaitem-square :item="artistData.relationships.artist.data[0]"></mediaitem-square>
                            </div>
                            <div class="card-footer">
                                {{ convertToHours(artistData.attributes.listenTimeInMinutes) }}
                                {{$root.getLz('term.time.hours', {'count':
                                convertToHours(artistData.attributes.listenTimeInMinutes) })}}<br>
                                {{$root.getLz('term.listenedTo')}} {{ artistData.attributes.playCount }}
                                {{$root.getLz('term.times')}}
                            </div>
                        </div>
                    </mediaitem-scroller-horizontal>
                </div>
                <!--            Top Albums-->
                <h3>{{$root.getLz('term.topAlbums')}}</h3>
                <div class="well">
                    <mediaitem-scroller-horizontal>
                        <div class="card replay-card" v-for="albumData in loaded.views['top-albums'].data">
                            <div class="card-body">
                                <mediaitem-square :item="albumData.relationships.album.data[0]"></mediaitem-square>
                            </div>
                            <div class="card-footer">
                                {{ convertToHours(albumData.attributes.listenTimeInMinutes) }}
                                {{$root.getLz('term.time.hours', {'count':
                                convertToHours(albumData.attributes.listenTimeInMinutes)})}}<br>
                                {{ albumData.attributes.playCount }} {{$root.getLz('term.plays')}}
                            </div>
                        </div>
                    </mediaitem-scroller-horizontal>
                </div>
                <!--            Top Songs-->
                <h3>{{$root.getLz('term.topSongs')}}</h3>
                <div class="well">
                    <listitem-horizontal :show-library-status="false"
                                         :items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
                </div>
                <h3>{{$root.getLz('term.topGenres')}}</h3>
                <div class="top-genres-container">
                    <div v-for="genre in loaded.topGenres" class="replay-genre-display">
                        <div class="genre-name">
                            {{ genre.genre }}
                        </div>
                        <div class="genre-count">
                            <div class="genre-count-bar" :style="{'width': genre.count + '%'}">
                                {{ genre.count }}%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</script>
<script>
  Vue.component('replay-page', {
    template: '#replay-page',
    data: function() {
      return {
        years: [],
        loaded: {
          id: -1
        },
        hourshow: true,
        musicTypeGenre: ""
      }
    },
    async mounted() {
      // Get available years
      let year = await app.mk.api.v3.music("/v1/me/music-summaries/search?extend=inLibrary&period=year&fields[music-summaries]=period%2Cyear&include[music-summaries]=playlist")
      this.years = year.data.data
      this.years.reverse()
      localStorage.setItem("seenReplay", true)
      this.getReplayYear();
      const musicGenre = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/genres/34`)
      this.musicTypeGenre = musicGenre.data.data[0].attributes.name
    },
    methods: {
      songsToArray(songsData) {
        let self = this
        let songs = []
        let topGenres = {}
        let genrePlayCount = 0;
        songsData.forEach(function(songData) {
          let song = songData.relationships.song.data[0]
          song.attributes.playCount = songData.attributes.playCount
          songs.push(song)
          genrePlayCount += song.attributes.playCount
          song.attributes.genreNames.forEach(function(genre) {
            if (genre != self.musicTypeGenre) {
              if (topGenres[genre] == undefined) {
                topGenres[genre] = song.attributes.playCount
              } else {
                topGenres[genre] += song.attributes.playCount
              }
            }
          })
        })
        let topGenresArray = []
        for (let genre in topGenres) {
          topGenresArray.push({
            genre: genre,
            count: topGenres[genre]
          })
        }
        topGenresArray.sort(function(a, b) {
          return b.count - a.count
        })
        topGenresArray.forEach(function(genre) {
          genre.count = Math.round(genre.count / genrePlayCount * 100)
        })
        this.loaded.topGenres = topGenresArray

        return songs
      },
      async getReplayYear(year = new Date().getFullYear()) {
        this.loaded.id = -1
        let response = await app.mk.api.v3.music(`/v1/me/music-summaries/year-${year}?extend=inLibrary&views=top-artists%2Ctop-albums%2Ctop-songs&include[music-summaries]=playlist&include[playlists]=tracks&includeOnly=playlist%2Ctracks%2Csong%2Cartist%2Calbum`)
        let replayData = response.data.data[0]
        // extended playlist
        let playlist = await app.mk.api.v3.music(replayData.relationships.playlist.data[0].href, { extend: "editorialArtwork,editorialVideo" })
        replayData.playlist = playlist.data.data[0]
        this.loaded = replayData
      },
      convertToHours(minutes) {
        return Math.floor(minutes / 60)
      }
    }
  });
</script>
